<template>
  <div style="position: relative;">
    <Button type="primary" icon="ios-search" @click="searchAll" style="margin-right: 10px;">所有用户</Button>
    <Button type="primary" @click="modalForm = true" style="margin-right: 10px;">添加数据</Button>
    <Button type="primary" @click="removes">删除多个</Button>
    <Input search enter-button placeholder="Enter something..."  @on-search="onSearch" style="width: 500px; position: absolute; left: 300px;"/><br>
    <Table border :columns="columns" :data="data" @on-selection-change="onSelect" style="margin-top: 15px; margin-bottom: 20px;" width="1000px"></Table>
    <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />

    <Modal v-model="modalForm" title="数据操作">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="用户名" prop="name">
          <Input v-model="formValidate.name" placeholder="请输入姓名"/>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input v-model="formValidate.password" placeholder="请输入密码"/>
        </FormItem>
        <FormItem label="邮箱" prop="email">
            <Input v-model="formValidate.email" placeholder="请输入邮箱" />
        </FormItem>
        <FormItem label="学位"  prop="degree">
            <Select v-model="formValidate.degree" placeholder="选择你的学位">
                <Option value="小学">小学</option>
                <Option value="初中">初中</option>
                <Option value="高中">高中</option>
                <Option value="本科" selected>本科</Option>
                <Option value="专科">专科</Option>
                <Option value="大专">大专</option>
                <Option value="博士">博士</option>
                <Option value="硕士">硕士</Option>
            </Select>
        </FormItem>
         <FormItem label="年龄" prop="age">
            <Input type="text" placeholder="请输入年龄"  number v-model="formValidate.age"/>
        </FormItem>
        <FormItem label="电话" prop="phone">
            <Input type="text" placeholder="请输入电话"  number v-model="formValidate.phone"/>
        </FormItem>
        <FormItem label="地址" prop="address">
            <Input v-model="formValidate.address" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入地址"/>
        </FormItem>
        <FormItem label="爱好" prop="hobby">
            <CheckboxGroup v-model="formValidate.hobby">
                <Checkbox label="吃东西">吃东西</Checkbox>
                <Checkbox label="睡觉">睡觉</Checkbox>
                <Checkbox label="跑步">跑步</Checkbox>
                <Checkbox label="看电影">看电影</Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem label="性别" prop="sex">
            <RadioGroup v-model="formValidate.sex">
                <Radio label="true">男</Radio>
                <Radio label="false">女</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
      </Form>
      <div slot="footer">
        我就不显示按钮
      </div>
    </Modal>
  </div>

</template>
<script>
import Base from '../base/Base';
export default {
  mixins: [Base],
  mounted(){
  	console.log(this.GLO.myUrl)
  },
  data() {
    return {
    	myUrl:this.GLO.myUrl,
      formValidate: {
        name    : '',
        password: '',
        email   : '',
        age     : '',
        phone   : '',
        degree  : '',
        sex     : '',
        hobby   : [],
        address : '',
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message : '必须输入用户名',
            trigger : 'blur'
          }
        ],
        password: [
          {
            required: true,
            message : '请输入密码',
            trigger : 'blur'
          }
        ],
        email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        age: [
            {type:'number',message:'格式不正确',trigger:'blur'}
//          { required: true, message: '年龄不为空', trigger: 'blur'}
        ],
        phone: [
            {type:'number',message:'格式不正确',trigger:'blur'}
//          { required: true, message: '手机号不为空', trigger: 'blur' }
        ],
        hobby: [
            { required: true, type: 'array', min: 1, message: '请选择你的爱好', trigger: 'change' },
            { type: 'array', trigger: 'change' }
        ],
        degree: [
            { required: true, message: '请选择你的学位', trigger: 'change' }
        ],
        address: [
            { required: true, message: '请输入你的地址', trigger: 'blur' },
            { type: 'string', min: 5, message: '至少输入5个字', trigger: 'blur' }
        ],
        sex: [
            { required: true, message: '请选择你的性别', trigger: 'change' }
        ],
      },
      columns: [
        {
          type : 'selection',
          width: 60,
          align: 'center',
          fixed:'left'
        },
        {
          title: '用户名',
          key  : 'name',
          ellipsis:true,
          fixed:'left',
          width:100
        },
        {
          title: '密码',
          key  : 'password',
          ellipsis:true,
          width:100
        },
        {
          title: '邮箱',
          key  : 'email',
          ellipsis:true,
          width:200
        },
        {
          title: '年龄',
          key  : 'age',
          width:100
        },
        {
          title: '电话',
          key  : 'phone',
          width:150
        },
        {
          title: '地址',
          key  : 'address',
          width:200
        },
        {
          title: '学位',
          key  : 'degree',
          width:100
        },
        {
          title : '性别',
          key   : 'sex',
          width:100,
          render: function(h,obj){
		        var sex = obj.row.sex;
		        var txt = "";
		        if(sex){
			        txt = "男"
		        } else {
			        txt = "女"
		        }
		        return h('div', [h('span',txt)]);
	        }
        },
        {
          title : '爱好',
          key   : 'hobby',
          width:200,
          render: function(h,obj){
            var hob = obj.row.hobby.join(',');
            //console.log(hob)
            return h('div', [h('span',hob)]);

          }
        },
        {
          title : '操作',
          key   : 'action',
          width : 150,
          align : 'center',
          fixed:'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row._id);
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id);
                    }
                  }
                },
                '删除'
              )
            ]);
          }
        }
      ]
    };
  }
};
</script>
